<template>
  <div>
    <div class="search-title">查询条件</div>
    <div class="search-box">
      <a-form-model :model="searchForm" layout="inline" ref="searchForm" class="searchForm">
        <a-form-model-item label="权限代号" prop="authCode">
          <a-input v-model="searchForm.authCode" :allowClear=true placeholder="请输入权限代号"/>
        </a-form-model-item>
        <a-form-model-item label="权限名称" prop="authName">
          <a-input v-model="searchForm.authName" :allowClear=true placeholder="请输入权限名称"/>
        </a-form-model-item>
        <a-form-model-item class="searchButton">
          <a-button type="primary" @click="getSearch">查询</a-button>
          <a-button type="default" @click="restSearch('searchForm')">重置</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <div class="table-operation">
      <a-button type="primary" @click="addAuth" icon="plus" v-if="QX.add">新增</a-button>
    </div>
    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="false"
      :loading="loading"
      rowKey="authId"
      :scroll="{x:1060,y: this.$getViewportSize().height-300 }">
      <template
        v-for="col in columns"
        :slot="col.key"
        slot-scope="text,record"
      >
        <span v-if="col.key=='action'">
          <a @click="editAuth(record)" v-if="QX.edit"><a-icon class="iconBtn" type="edit" />编辑</a>
          <a-divider v-if="QX.edit && QX.delete" type="vertical"/>
          <a-popconfirm
            title="确认是否删除？"
            ok-text="是"
            cancel-text="否"
            @confirm="removeAuth(record)"
          >
            <a v-if="QX.delete"><a-icon class="iconBtn" type="delete"/>删除</a>
          </a-popconfirm>
        </span>
        <span v-else>
          <TableTootip :content="text"></TableTootip>
        </span>
      </template>
    </a-table>
    <a-pagination
      show-size-changer
      :total="totalPage"
      :current="pageIndex"
      :pageSize="pageSize"
      @showSizeChange="onShowSizeChange"
      @change="onChangePage"
      style="float: right;margin-top: 15px"
    />

    <a-modal centered="true" v-model="visible" :title="title" @ok="submitForm">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" ref="form" class="lay-drawer-form">
        <a-form-model-item label="权限代号" prop="authCode">
          <a-input v-model="form.authCode" placeholder="请输入权限代号" :maxLength="20"/>
        </a-form-model-item>
        <a-form-model-item label="权限名称" prop="authName">
          <a-input v-model="form.authName" placeholder="请输入权限名称" :maxLength="25"/>
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button key="back" @click="visible=!visible">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="submitLoading" @click="submitForm">
          确定
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import {req} from '../../../api/axiosFun'
import preventBack from 'vue-prevent-browser-back';
import TableTootip from '../../../components/TableTootip.vue'
export default {
  name: "Auth",
  mixins: [preventBack],//注入
  components:{
    TableTootip
  },
  data() {
    return {
      QX:{},
      title: '',
      labelCol: {span: 4},
      wrapperCol: {span: 20},
      form: {
        authId: 0,
        authCode: '',
        authName: '',
      },
      rules: {
        authCode: [
          {required: true, message: '请输入权限代码', trigger: 'blur'},
        ],
        authName: [
          {required: true, message: '请输入权限名称', trigger: 'blur'},
        ],
      },
      searchForm: {
        authCode: '',
        authName: '',
      },
      visible: false,
      dataList: [],
      columns,
      loading: false,
      submitLoading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
    }
  },
  watch: {
    visible: function (newVal, oldVal) {
      if (!newVal) {
        this.restForm('form');
        this.form = this.$options.data().form;
        this.form.authId = 0;
      }
    }
  },
  mounted() {
    this.getAuthList();
  },
  methods: {
    //查询
    getSearch() {
      this.pageIndex = 1
      this.getAuthList()
    },
    /* 重置查询 */
    restSearch(form) {
      this.restForm(form);
      this.pageIndex = 1
      this.getAuthList();
    },
    /* 删除权限 */
    removeAuth(record) {
      this.loading = true
      req("post", '/auth/removeAuth', {
        authId: record.authId
      }).then(res => {
        this.loading = false
        if (res.result === 'success') {
          this.$message.success(res.message);
          this.getAuthList();
        }
      });
    },
    /* 新增权限信息 */
    addAuth() {
      this.visible = true;
      this.title = '新增权限';
    },
    /* 编辑权限信息 */
    editAuth(record) {
      this.title = '修改权限';
      this.loading = true
      req("post", '/auth/getAuthById', {
        authId: record.authId
      }).then(res => {
        this.loading = false
        if (res.result === 'success') {
          let auth = res.data;
          this.visible = true;
          this.$nextTick(() => {
            this.form.authId = auth.authId;
            this.form.authCode = auth.authCode;
            this.form.authName = auth.authName;
          })
        }
      });
    },
    /* 保存or修改权限信息 */
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const url = this.form.authId ? 'updateAuth' : 'addAuth';
          this.submitLoading = true
          req("post", `/auth/${url}`, this.form).then(res => {
            if (res.result === 'success') {
              this.visible = false;
              this.getAuthList();
              this.$message.success(res.message);
            }
            this.submitLoading = false
          });
        }
      });
    },
    /* 重置表单 */
    restForm(form) {
      this.$refs[form].resetFields();
    },
    /* 改变页数事件 */
    onChangePage(page, pageSize) {
      this.pageIndex = page;
      this.getAuthList();
    },
    /* 改变每页显示条数 */
    onShowSizeChange(current, pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.getAuthList();
    },
    /* 权限信息列表 */
    getAuthList() {
      this.loading = true;
      this.searchForm.page = this.pageIndex;
      this.searchForm.rows = this.pageSize;
      var searchForm = {}
      for (var key in this.searchForm) {
        searchForm[key] = this.searchForm[key]||''
      }
      req("post", `/auth/getAuthListPage`, searchForm)
        .then(res => {
          if (res.result === 'success') {
            this.dataList = res.data;
            this.totalPage = res.page.totalResult;
            this.QX = res.QX;
            let operation = columns[columns.length - 1];
            if (!this.QX.edit && !this.QX.delete) {
              if (operation.title === '操作') {
                columns.splice(columns.length - 1, 1)
              }
            } else {
              if (operation.title !== '操作') {
                columns.push({
                  align: 'center',
                  title: '操作',
                  width: 150,
                  dataIndex: 'action',
                  key: 'action',
                  fixed: 'right',
                  scopedSlots: {customRender: 'action'},
                });
              }
            }
          }
          this.loading = false;
        }).catch(e => {
         this.loading = false;
      });
    },
  }
}
const columns = [
  {
    title: '序号',
    align: 'center',
    width: '40px',
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '权限代号',
    align: 'center',
    dataIndex: 'authCode',
    key: 'authCode',
    width: 170,
    scopedSlots: { customRender: 'authCode' }
  },
  {
    title: '权限名称',
    align: 'left',
    dataIndex: 'authName',
    key: 'authName',
    width: 250,
    scopedSlots: { customRender: 'authName' }
  },
  {
    title: '创建者',
    align: 'center',
    dataIndex: 'createUser',
    key: 'createUser',
    scopedSlots: { customRender: 'createUser' },
    width: 90
  },
  {
    title: '新增时间',
    dataIndex: 'createDatetime',
    align:'center',
    key: 'createDatetime',
    scopedSlots: { customRender: 'createDatetime' },
    width: 140
  },
  {
    title: '更新者',
    align: 'center',
    dataIndex: 'updateUser',
    key: 'updateUser',
    scopedSlots: { customRender: 'updateUser' },
    width: 90
  },
  {
    title: '更新时间',
    dataIndex: 'updateDatetime',
    align:'center',
    key: 'updateDatetime',
    scopedSlots: { customRender: 'updateDatetime' },
    width: 140
  },
  {
    align: 'center',
    title: '操作',
    width: 130,
    fixed: 'right',
    dataIndex: 'action',
    key: 'action',
    scopedSlots: {customRender: 'action'},
  },
];
</script>

<style scoped>
@import "../../../assets/css/maincss.css";

</style>
